<template>
  <view class="box">
    <view class="box-content">
      <view class="top">
        <view class="top-left">
          <view class="top-left-img">
            <image src="../../static/地址.png" ></image>
          </view>
        </view>
        <view class="top-right">
          <view>李明 186****112</view>
          <view>上海市宝山区张庙街道泗塘四村62号楼</view>
        </view>
      </view>
      <view class="content">
        <view class="content1">
          <view><image src="../../static/image6.png" ></image></view>
          <view>正茂通商户</view>
        </view>
        <view class="content2">
          <view class="content2-left">
            <image src="../../static/image7.png" ></image>
          </view>
          <view class="content2-right">
            <view class="content2-right1">
              男运动鞋秋季男鞋青少年正品透气夏网面减震跑步休闲旅游鞋
            </view>
            <view class="content2-right2">标准白;42</view>
            <view class="content2-right3">
              <view>￥</view>
              <view>890.00</view>
              <view>×1</view>
            </view>
          </view>
        </view>
        <view class="content3">
          <view class="content3-1">
            <view>优惠金额</view>
            <view>￥890.00</view>
          </view>
          <view class="content3-2">
            <view>运费</view>
            <view>￥0.00</view>
          </view>
          <view class="content3-3">
            <view>实付</view>
            <view>￥890.00</view>
          </view>
          <view class="content3-4">
            <view>备注:请尽快发货,发顺丰</view>
          </view>
        </view>
      </view>
      <view class="bottom">
        <view class="bottom1">订单信息</view>
        <view class="bottom2">
          <view>订单编号</view>
          <view>2021987616631</view>
        </view>
        <view class="bottom3">
          <view>下单时间</view>
          <view>2021-11-12 15:58:32</view>
        </view>
        <view class="bottom4">
          <view>支付方式</view>
          <view>微信支付</view>
        </view>
      </view>
    </view>
    <view class="box-bottom">
      <view>
        <uv-button text="申请售后"  shape="circle"></uv-button>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {};
  },
  methods: {},
};
</script>

<style lang="scss">
.box {
  background-color: #f5f5f5;
  height: 86vh;
  margin-bottom: 10px;
  .box-content {
    width: 90%;
    margin: auto;
    padding-top: 15px;
    .top {
      margin-bottom: 15px;

      background-color: #fff;
      display: flex;
      border-radius: 10px;
      .top-left {
        width: 20%;
        .top-left-img {
          width: 30px;
          height: 30px;
          background-color: #fff7f7;
          border-radius: 50%;
          margin: 20px 0 0 15px;
          padding: 5px;
          image {
            width: 100%;
          }
        }
      }
      .top-right {
        padding: 20px 10px 20px 10px;
        view:nth-child(1) {
          font-size: 18px;
        }
        view:nth-child(2) {
          margin-top: 5px;
          font-size: 14px;
        }
      }
    }
    .content {
      border-radius: 10px;
      background-color: #fff;
      .content1 {
        display: flex;
        padding: 5px 10px 5px 10px;
        view:nth-child(1) {
          image {
            width: 30px;
          }
        }
        view:nth-child(2) {
          margin-top: 4px;
        }
      }
      .content2 {
        border-bottom: 2px solid #f9fafa;
        display: flex;
        justify-content: space-between;
        padding: 0 10px 0 10px;
        .content2-left {
          width: 50%;
          image {
            width: 100%;
          }
        }
        .content2-right {
          padding: 5px;
          .content2-right1 {
            font-size: 14px;
          }
          .content2-right2 {
            margin-top: 6px;
            font-size: 12.5px;
            color: #b2b2b2;
          }
          .content2-right3 {
            display: flex;
            font-size: 14px;
            margin-top: 10px;
            view:nth-child(2) {
              font-weight: bold;
              font-size: 17px;
              margin: -2px 3px 0 0;
            }
            view:nth-child(3) {
              color: #b4b4b4;
            }
          }
        }
      }
      .content3 {
        padding: 5px 10px 5px 10px;
        font-size: 15px;
        .content3-1,
        .content3-2,
        .content3-3,
        .content3-4 {
          display: flex;
        }
        .content3-1,
        .content3-2 {
          justify-content: space-between;
          margin-bottom: 15px;
        }
        .content3-3 {
          margin-left: 205px;
          view:nth-child(1) {
            font-size: 17px;
            font-weight: bold;
          }
          view:nth-child(2) {
            font-size: 16px;
            font-weight: bold;
            color: #fc5031;
            margin-left: 5px;
          }
        }
        .content3-4 {
          view {
            width: 100%;
            background-color: #f5f5f5;
            padding: 10px;
            border-radius: 5px;
            margin-top: 10px;
          }
        }
      }
    }
    .bottom {
      border-radius: 10px;
      padding: 10px;
      background-color: #fff;
      margin-top: 15px;
      font-size: 15px;
      .bottom1,
      .bottom2,
      .bottom3,
      .bottom4 {
        display: flex;
        justify-content: space-between;
      }
      .bottom1 {
        padding: 5px 0 5px 0;
        font-weight: bold;
      }
      .bottom2,
      .bottom3,
      .bottom4 {
        margin-bottom: 5px;
      }
    }
  }
  .box-bottom {
    view{
      width:100px;
      margin-top:25px;
      margin-left:250px;
    }
  }
}
</style>
